<template>
	<view :class="'list-item ' + (isLast ? 'isLast' : '')">
		<view v-if="item.re_type == 'store'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box">
				<view class="name-box">
					<text class="name">{{item.store_name}}</text>
					<view class="store-tag" v-if="item.business_label.length > 0">
						<text class="group-tip" v-if="item.business_label[0]">{{item.business_label[0]}}</text>
						<text class="food-tip" v-if="item.business_label[1]">{{item.business_label[1]}}</text>
						<text class="appoint-tip" v-if="item.business_label[2]">{{item.business_label[2]}}</text>
					</view>
				</view>
				<view class="small desc">
					<text class="iconfont icon-star"></text>
					<text class="score">{{item.star}}</text>
				</view>
				<view class="small desc orange bottom">{{item.tip}}</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="'/pages/store/homePage?store_id=' + item.store_id" data-url_title="店铺主页">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
		<view v-if="item.re_type == 'shop'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box">
				<view class="name-box">
					<text class="name">{{item.store_name}}</text>
					<!-- <text class='icon'>外卖</text> -->
					<text class="small mt5 distance">{{item.range}}</text>
				</view>
				<view class="small desc">
					<text class="iconfont icon-star"></text>
					<text class="score">{{item.star}}</text>
					<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
				</view>
				<view class="rel flex flex-center mb5" v-if="item.deliver_time !== ''">
					<view class="small inline">
						<lang keywords="起送价" :right="true"></lang>
						{{currency}}
						<text>{{item.price_1}}</text>
					</view>
					<block v-if="config.config.shop_show_delivermoney">
						<text class="iconfont icon-line"></text>
						<view class="small inline">
							<lang keywords="配送费" :right="true"></lang>
							{{currency + item.price_2}}
						</view>
					</block>
	
					<!-- <view class='small right inline'>{{item.deliver_time}}<lang keywords='送达' left='{{true}}'/></view> -->
				</view>
				<view class="discount-icon">
					<view :class="icon.type" v-for="(icon, index2) in item.info_arr" :key="index2">{{icon.text}}</view>
				</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
		<view v-if="item.re_type == 'meal'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box">
				<view class="name-box">
					<view class="name">{{item.store_name}}
						<!-- <text class='food-icon'>点餐</text> -->
					</view>
					<text class="small mt5 distance">{{item.range}}</text>
				</view>
				<view class="small desc">
					<text class="iconfont icon-star"></text>
					<text class="score">{{item.star}}</text>
				</view>
				<view class="rel flex flex-center flex-wrap">
					<text class="small bg" v-for="(label, index2) in item.business_label" :key="index2">{{label}}</text>
				</view>
				<view class="small desc orange">{{item.tip}}</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
		<view v-if="item.re_type && item.re_type == 'hotel'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box">
				<view class="name-box">
					<view class="name">{{item.store_name}}
						<!-- <text class='food-icon'>酒店</text> -->
					</view>
					<text class="small mt5 distance">{{item.range}}</text>
				</view>
				<view class="rel flex flex-center">
					<text class="iconfont icon-star"></text>
					<text class="score">{{item.star}}</text>
					<lang class="small" keywords="X1人消费" :X1="item.sale_count + '+'"></lang>
				</view>
				<view class="rel flex flex-center mb2">
					<text class="small">{{item.address}}</text>
					<view class="small right">
						<text class="green" v-for="(label, index2) in item.label" :key="index2">{{label}}</text>
					</view>
				</view>
				<view class="rel flex price-box">
					<text class="small red bold">{{currency}}</text>
					<text class="red now-price">{{item.price}}</text>
					<block v-if="item.price_up == 1">
						<lang class="small" keywords="起"></lang>
					</block>
					<text class="small right mt5 orange">{{item.tip}}</text>
				</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
		<view v-if="item.re_type && item.re_type == 'group'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box group">
				<view class="name-box">
					<view class="name">
						<text class="mr5">{{item.store_name}}</text>
						<block v-if="item.discount">
							<lang class="food-icon" keywords="超值"></lang>
						</block>
					</view>
					<text class="small mt5 distance">{{item.range}}</text>
				</view>
				<view class="small desc">{{item.name}}</view>
				<view class="rel flex flex-center mb5 price-box">
					<text class="small red bold">{{currency}}</text>
					<text class="red now-price">{{item.price}}</text>
					<view class="small gray old-price inline">
						<lang keywords="门市价"></lang>:{{currency + item.old_price}}
					</view>
					<view class="small right mt5 inline">
						<lang keywords="月售" :right="true"></lang>{{item.sale_count}}
					</view>
				</view>
				<view class="discount-icon" v-if="item.info != ''">
					<text class="icon">{{item.info}}</text>
				</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit.stop="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
		<view v-if="item.re_type == 'pin_group'" class="shop-item border-b">
			<view class="shop-img">
				<image :src="item.pic" mode="aspectFill" :lazy-load="true"></image>
				<block v-if="item.is_brand == 1">
					<lang class="img-tip" keywords="品牌甄选"></lang>
				</block>
			</view>
			<view class="info-box group">
				<view class="name-box">
					<view class="name">
						<text class="mr5">{{item.store_name}}</text>
						<lang class="food-icon" keywords="拼团"></lang>
					</view>
					<text class="small mt5 distance">{{item.range}}</text>
				</view>
				<view class="small desc">{{item.name}}</view>
				<view class="rel flex flex-center price-box mb2">
					<text class="small red bold">{{currency}}</text>
					<text class="red now-price">{{item.price}}</text>
					<view class="small gray old-price inline">
						<lang keywords="门市价"></lang>:{{currency + item.old_price}}
					</view>
					<!-- <text class='small right mt5'>月售{{item.sale_count}}</text> -->
				</view>
				<view class="news">
					<swiper class="news-swiper" vertical="true" autoplay="true" circular="true" interval="8000">
						<swiper-item class="flex">
							<!-- <text class='desc red'>已拼{{item.sale_count}}件</text> -->
							<lang class="desc red" keywords="已拼X1件" :X1="item.sale_count"></lang>
						</swiper-item>
						<swiper-item class="flex">
							<lang class="desc red" keywords="X1人正在拼团" :X1="item.sale_person"></lang>
						</swiper-item>
					</swiper>
					<view class="news-mask"></view>
				</view>
			</view>
			<form :report-submit="true" class="formidForm" @submit="goUrl($event)" :data-url="item.url" :data-url_title="item.store_name">
				<button formType="submit" class="formidBtn"></button>
			</form>
		</view>
	
	</view>
</template>

<script>
	var common = require('../../utils/common.js');
	export default {
		name: 'StoreItem',
		data () {
			return {
				currency: '¥'
			}
		},
		props: {
			item: {
				type: Object,
				default: {}
			},
			config: {
				type: Object,
				default: {}
			},
			isLast: {
				type: Boolean,
				default: false
			},
			location: {
				type: Object,
				default: {lng: 0, lat: 0}
			}
		},
		watch: {
			config: {
				immediate: true,
				handler (data) {
					if (data) {
						this.currency = data.config.Currency_symbol
					}
				} 
			}
		},
		methods: {
			goUrl(e) {
				if (e.type == 'submit') {
					common.upFormid(e);
				}
				var pageTitle = e.currentTarget.dataset.url_title ? e.currentTarget.dataset.url_title : '';
				var url = e.currentTarget.dataset.url;
				if (url.indexOf('/pages/store/homePage') != -1) {
					url = url + '&lng=' + this.location.lng + '&lat=' + this.location.lat
					uni.navigateTo({
						url: url
					})
					return
				}
				common.parseUrl(url, '', false, pageTitle);
			}
		}
	}
</script>

<style scoped>
	.rel{position: relative;}
	.flex{display: flex;}
	.flex-center{align-items: center;}
	.flex-between{justify-content: space-between;}
	.flex-wrap{flex-wrap: wrap;}
	.border-b::after{content: '';position: absolute;bottom: 0;left: 0;height: 1rpx;right: 0;background: #e5e5e5;transform: scaleY(0.5);}
	.mb5{margin-bottom: 5px;}
	.mt5{margin-top: 5px;}
	.mr5{margin-right: 5px;}
	.mb2{margin-bottom: 2px;}
	.inline{display: inline-block;}

	.shop-item {
		padding: 20rpx;
		display: flex;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.shop-item.border-b::after {
		left: 20rpx;
	}
	
	.list-wrapper{
		box-sizing: border-box;
	}

	.list-wrapper .list-item.list-item .shop-item.border-b:last-child::after {
		height: 0;
	}

	.shop-item .shop-img {
		width: 102px;
		height: 72px;
		border-radius: 5px;
		flex-shrink: 0;
		margin-right: 20rpx;
		overflow: hidden;
		position: relative;
	}

	.shop-item .shop-img image {
		width: 100%;
		height: 100%;
	}

	.shop-item .info-box {
		position: relative;
		width: calc(100% - 102px - 20rpx);
		min-height: 80px;
	}

	.shop-item .small {
		color: #333;
		font-size: 12px;
	}

	.shop-item .small.bg {
		background: #f4f4f4;
		margin-right: 5px;
		margin-bottom: 5px;
		padding: 0 20rpx;
	}

	.shop-item .name-box {
		display: flex;
		justify-content: space-between;
		position: relative;
	}

	.shop-item .name-box.food {
		justify-content: flex-start;
	}

	.shop-item .name-box.food .icon {
		margin-left: 5px;
		font-size: 12px;
		border-radius: 3px;
		align-self: center;
		color: #fff;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		background: linear-gradient(to right, #facd7a, #faa300);
	}

	.shop-item .name {
		font-size: 16px;
		font-weight: 500;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .distance {
		white-space: nowrap
	}

	.shop-item .info-box.group .name {
		overflow: static;
		flex-grow: 1;
		height: 25px;
	}

	.shop-item .info-box.group .name .mr5 {
		max-width: calc(100% - 60px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}

	.shop-item .info-box.group .name .food-icon {
		position: relative;
		top: -4px;
		margin-left: 0;
	}

	.shop-item .gray {
		color: #bbb;
	}

	.shop-item .red {
		color: #f6503e;
	}

	.shop-item .orange {
		color: #f17019;
		font-weight: bold;
	}

	.shop-item .green {
		color: #06c1ae;
		border: 1px solid #06c1ae;
		margin-left: 5px;
		font-size: 11px;
		padding: 1px 3px;
		border-radius: 2px;
	}

	.shop-item .bold {
		font-weight: bold;
	}

	.shop-item .right {
		position: absolute;
		right: 0;
	}

	.shop-item .bottom {
		position: absolute;
		bottom: 0;
	}

	.shop-item .desc {
		margin-bottom: 3px;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shop-item .price-box {
		line-height: 1;
		align-items: baseline;
	}

	.shop-item .now-price {
		margin-right: 5px;
		font-size: 18px;
		font-weight: 500;
	}

	.shop-item .discount-icon {
		display: flex;
		flex-wrap: wrap;
	}

	.shop-item .discount-icon .icon {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
		color: #ce847f;
		border: 1rpx solid #f4cfcc;
		background: #fff4f2;
	}

	.shop-item .store-tag {
		height: 20px;
		white-space: nowrap;
	}

	.shop-item .store-tag text {
		display: inline-block;
		width: 20px;
		height: 100%;
		background: pink;
		font-size: 14px;
		vertical-align: top;
		color: #fff;
		margin-left: 5px;
		text-align: center;
		line-height: 20px;
	}

	.shop-item .store-tag text.group-tip {
		background: #74da1c;
	}

	.shop-item .store-tag text.food-tip {
		background: #fc5e03;
	}

	.shop-item .store-tag text.appoint-tip {
		background: #f8c717;
	}

	.shop-item .img-tip {
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		padding: 0 5px;
		font-size: 12px;
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		border-radius: 0 10px 0 5px;
	}

	.shop-item .icon-star {
		color: #ffc900;
		font-size: 12px;
		margin-right: 5px;
	}

	.shop-item .name-box .food-icon {
		background: linear-gradient(to right, rgb(243, 137, 101), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
		padding: 0 5px;
		margin-left: 5px;
		border-radius: 3px;
		display: inline-block;
	}

	.shop-item .score {
		margin-right: 10px;
		font-size: 12px;
	}

	.shop-item .sale-tip {
		background: linear-gradient(to right, rgb(247, 105, 57), rgb(255, 60, 0));
		color: #fff;
		font-size: 12px;
		margin-right: 5px;
		padding: 2px 5px;
		border-radius: 2px;
	}

	.shop-item .news,
	.shop-item .news .news-swiper {
		margin: 0;
		font-size: 12px;
		height: 20px;
	}

	.loading-tip {
		text-align: center;
		line-height: 30px;
		color: #999;
		font-size: 14px;
		padding: 20px 0;
	}

	/* 发票 */
	.invoice {
		color: #06c1ae;
		border: 1rpx solid #c5f3ef;
	}

	/* 平台首单优惠 平台优惠 */
	.system_newuser,
	.system_minus {
		color: #aa8023;
		border: 1rpx solid #f3e5c6;
	}

	/* 打折 部分商品限时优惠  部分商品分类折扣优惠 配送费优惠 店铺首单优惠 店铺优惠 */
	.discount,
	.isdiscountgoods,
	.isdiscountsort,
	.delivery,
	.newuser,
	.minus {
		color: #ff3e4a;
		border: 1rpx solid #fce5e7;
	}

	.discount-icon>view {
		margin-right: 5px;
		margin-bottom: 5px;
		font-size: 11px;
		padding: 0 3px;
		border-radius: 2px;
	}
</style>
